<!doctype html>
<html>
  <head>
    <style>
      html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: 'sans-serif';
      }

      #canvas {
        display: block;
        border-radius: 8px;
        background: #fff;
        max-width: 1080px;
        width: 80%;
        height: auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
        margin: 40px auto;
        outline: none;
      }

      button {
        display: block;
        margin: 0 auto;
        font-size: 18px;
        border-radius: 4px;
        padding: 8px 16px;
      }
    </style>

    <meta charset="utf-8"/>
    <title>LÖVR</title>
  </head>

  <body>
    <div class="container">
      <canvas id="canvas" width="1080" height="600" tabIndex="1"></canvas>
    </div>

    <script type="text/javascript">
      var container = document.querySelector('.container');
      var canvas = document.getElementById('canvas');
      var button = document.createElement('button');
      button.textContent = 'Enter VR';

      var Module = window.Module = {
        arguments: [],
        preRun: [],
        postRun: [],
        print: console.log.bind(console),
        printErr: console.error.bind(console),
        thisProgram: './lovr',
        canvas: canvas
      };

      // To run a LÖVR project on this page, create a .lovr (zip) file of its folder and serve it
      // alongside the HTML file.  Then set the 'project' variable below to the project's filename.
      // This downloads the .lovr file into the virtual filesystem and adds it as a virtual command
      // line argument before booting up LÖVR.
      // Example: var project = 'app.lovr';
      var project = null;
      if (project) {
        Module.arguments.push(project);
        Module.preRun.push(function() {
          Module.FS_createPreloadedFile('/', project, project, true, false);
        });
      }

      // If WebXR is supported and immersive sessions are supported, add a button to the DOM that
      // controls starting/stopping the immersive session.
      if (navigator.xr) {
        navigator.xr.isSessionSupported('immersive-vr').then(function(supported) {
          if (!supported) return;

          container.appendChild(button);

          var active = false;

          function onEnter() {
            active = true;
            button.textContent = 'Exit VR';
          }

          function onExit() {
            active = false;
            button.textContent = 'Enter VR';
          }

          button.addEventListener('click', function() {
            if (!active) {
              Module.lovr.enterVR().then(function(session) {
                session.addEventListener('end', onExit);
                onEnter();
              });
            } else {
              Module.lovr.exitVR().then(onExit);
            }
          });
        });
      }
    </script>

    {{{ SCRIPT }}}
  </body>
</html>
